import React, { Component } from 'react';
import { DeleteOutline } from 'antd-mobile-icons'
import './history.scss'
import service from '../../../api';
import { Tag } from 'antd-mobile'
import { withRouter } from 'react-router-dom';


class History extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hot: [],
            recent: [],
            list: []
        }
    }
    componentDidMount() {
        // 请求热门搜索
        service.product.pro_hotlist({}).then((res) => {
            console.log(res.data);
            this.setState({ hot: res.data.data }, () => {
                console.log(this.state.hot);
            })
        })
        console.log(localStorage.getItem('search'));
        if (localStorage.getItem('search')) {
            this.setState({ list: localStorage.getItem('search').split(',') }, () => {
                console.log(this.state.list);
            })
        }
    }
    Clear() {
        localStorage.removeItem('search')
    }
    render() {
        return (
            <div className='old'>
                <div className="recent">
                    <div className="hei">
                        <h5>最近搜索</h5>
                        <DeleteOutline onClick={() => this.Clear()} />

                    </div>
                    <div className="bob">
                        {
                            this.state.list == null || this.state.list.map((item, index) => {
                                return (
                                    <Tag color='red' fill='outline' key={index}>{item}</Tag>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="hot">
                    <h5>热门搜索</h5>
                    <div className="bob">
                        {
                            this.state.hot.map((item, index) => {
                                return (
                                    <Tag color='primary' fill='outline' key={index}>{item.category}</Tag>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(History);